<template>
  <Header></Header>
  <div id="content-box">
    <div class="table-box">
      <a-table
        :columns="columns"
        :data-source="flightsInfo"
        :loading="loading"
        :pagination="pagination"
        @change="handleChangePage"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'operation'">
            <div v-if="record.status == 3">
              <a-popconfirm
                title="确认发送起飞指令？"
                ok-text="确认"
                cancel-text="取消"
                @confirm="confirmTakeoff(record.id)"
              >
                <a-button
                  type="primary"
                  :loading="takeOffLoading && clickId == record.id"
                  >确认起飞</a-button
                >
              </a-popconfirm>
            </div>
            <div v-else-if="record.status == 4">
              <a-popconfirm
                title="确认发送降落指令？"
                ok-text="确认"
                cancel-text="取消"
                @confirm="confirmLanded(record.id)"
              >
                <a-button
                  danger
                  :loading="landLoading && clickId == record.id"
                  >确认降落</a-button
                >
              </a-popconfirm>
            </div>
            <div v-else>
              <span class="no-operation">无操作</span>
            </div>
          </template>
        </template>
      </a-table>
    </div>
    <div class="form-box">
      <CreateFlightForm></CreateFlightForm>
    </div>
    <div class="form-box">
      <CreateAircraftForm></CreateAircraftForm>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from "../components/Header.vue";
import { ref, computed, onBeforeMount } from "vue";
import { useRequest } from "vue-request";
import {
  landFlight,
  queryAllFlightAmount,
  queryAllFlights,
  takeoffFlight,
} from "../api/flightApi";
import { HTTP_STATUS } from "../api/request";
import {
  message,
  type TablePaginationConfig,
  type TableProps,
} from "ant-design-vue";
import CreateFlightForm from "../components/CreateFlightForm.vue";
import CreateAircraftForm from "../components/CreateAircraftForm.vue";
import emitter from "../utils/mitt";
import { EmitList } from "../utils/emitEnums";

onBeforeMount(() => {
  loadAmount();
  emitter.on(EmitList.FLIGHT_CHANGE,async () => {
    await loadAmount()
    pagination.value.current = 1
    run(1)
  })
});

async function loadAmount() {
  try {
    const res: any = await queryAllFlightAmount();
    if (res.status == HTTP_STATUS.SUCCESS) {
      pagination.value.total = res.data;
    }
  } catch (error) {
    console.error(error);
  }
}

const {
  data: dataSource,
  run,
  loading,
} = useRequest(queryAllFlights, {
  defaultParams: [1],
});

const flightsInfo = computed(() => {
  let data: any = dataSource.value?.data;

  if (data == null) {
    return null;
  }
  data.forEach((value: any) => {
    value.model = value.aircraftInfoDTO.model;
    value.airline = value.aircraftInfoDTO.airlineSimpleName;
    value.position = value.deployCity + " - " + value.arrivalCity
  });
  return data;
});

const handleChangePage: TableProps["onChange"] = async (
  pag: TablePaginationConfig
) => {
  await loadAmount();
  pagination.value.current = pag.current!;
  run(pag.current!);
};

const pagination = ref({
  total: 0,
  current: 1,
  pageSize: 5,
});

const columns = [
  {
    title: "航班号",
    dataIndex: "number",
    key: "number",
  },
  {
    title: "状态",
    dataIndex: "statusInfo",
    key: "statusInfo",
  },
  {
    title: "地点信息",
    dataIndex: "position",
    key: "position"
  },
  {
    title: "预设起飞时间",
    dataIndex: "startTime",
    key: "startTime",
  },
  {
    title: "预设降落时间",
    dataIndex: "endTime",
    key: "endTime",
  },
  {
    title: "飞机型号",
    dataIndex: "model",
    key: "model",
  },
  {
    title: "航空公司",
    dataIndex: "airline",
    key: "airline",
  },
  {
    title: "操作",
    dataIndex: "operation",
  },
];

const clickId = ref<number>();

const { run: runTakeoff, loading: takeOffLoading } = useRequest(takeoffFlight, {
  manual: true,
  onSuccess: () => {
    message.success("发送指令成功");
  },
});

const { run: runLanding, loading: landLoading } = useRequest(landFlight, {
  manual: true,
  onSuccess: () => {
    message.success("发送指令成功");
  },
});

function confirmTakeoff(id: number) {
  clickId.value = id;
  runTakeoff(id);
  setTimeout(() => run(pagination.value.current), 2000);
}

function confirmLanded(id: number) {
  clickId.value = id;
  runLanding(id);
  setTimeout(() => run(pagination.value.current), 2000);
}
</script>

<style lang="scss" scoped>
@import "../assets/css/variables.scss";

.flexBox {
  display: flex;
  justify-content: center;
  align-items: center;
}

#content-box {
  height: 90%;
  background-color: $grayBackgroundColor;

  /* display: grid;
  grid-template-columns: 3fr 7fr; */
  @extend .flexBox;

  justify-content: space-around;

  flex-wrap: wrap;

  color: #333333;

  .table-box {
    @extend .flexBox;
    // width: 100%;
    // flex-basis: 100%;
  }

  .no-operation {
    color: $fontGrayColor;
    user-select: none;
  }

  /* .form-box {
    position: relative;
    bottom: 10%;
  } */
}
</style>
